<!--
 * @Author: yangfan 1437446666@qq.com
 * @Date: 2023-02-25 13:51:38
 * @LastEditors: yangfan 1437446666@qq.com
 * @LastEditTime: 2023-02-26 10:36:26
 * @FilePath: \creation-platform-113\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <LoginVis v-if="state.thisRouterName === '登录'"></LoginVis>
  <HelloWorld v-else></HelloWorld>
</template>

<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import LoginVis from './views/login.vue'

import { useRouter } from 'vue-router'
export default defineComponent({
  components: { HelloWorld, LoginVis },
  setup() {
    const state = reactive({
      thisRouterName: ''
    })
    const router = useRouter()
    //动态的面包屑
    watch(
      () => router.currentRoute.value.name,
      (newValue: any) => {
        state.thisRouterName = newValue
      },
      { immediate: true }
    )
    return { state }
  }
})
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,
body {
  width: 100vw;
  height: 100vh;
}
#app {
  width: 100vw;
  height: 100vh;
}
</style>
